{% extends 'base/base.html' %}
{% load static %}
{% block css %}
    <!-- Bootstrap-table -->
    <link rel="stylesheet" href="{% static 'css/bootstrap-table.min.css' %}">
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>用户信息管理
                        <small>用户列表</small>
                    </h2>
                    <div class="clearfix"></div>
                </div><!-- x_title -->
                <div class="x_content">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <!-- 表格主体 -->
                        <table id="user-table" data-toggle="table" class="table table-bordered table-striped"></table>
                        <!-- 表格工具栏 -->
                        <div id="toolbar">  
                            <div class="btn-group">
                                <!-- 新增用户 -->
                                <a href="{% url 'user_add' %}" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-plus">新增用户</i></a>
                                <button class="btn btn-danger btn-sm" onclick="deleteMulInfo()">
                                    <i class="glyphicon glyphicon-trash">删除所选</i>
                                </button>
                            </div><!-- btn-group -->
                            <input type="text" name="" id="searchText">
                            <button id="searchButton" onclick="searchButton()" class="btn btn-primary btn-sm">查询</button>
                            <button id="resetButton" onclick="resetButton()" class="btn btn-primary btn-sm">重置</button>           
                        </div><!-- toolbar -->
                    </div><!-- col-md-12 col-sm-12 col-xs-12 -->
                </div><!-- x_content -->
            </div><!-- x_panel -->
        </div><!-- col-md-12 col-sm-12 col-xs-12 -->
    </div><!-- row -->

    <!-- 模态框-单选删除提示 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="deleteInfo">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">提示信息</h4>
            </div>
            <div class="modal-body">
              <h4>您确定要删除这名用户吗？</h4>
              <h5 id="deleteUsername"></h5>
              <!-- 隐藏需要删除的ID -->
              <input type="hidden" name="" id="deleteId">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-success" onclick="deleteConfirm()">确定</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 模态框-多选删除提示 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="deleteMulInfo">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">提示信息</h4>
            </div>
            <div class="modal-body">
              <h4 id="deleteIdLength"></h4>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-success" onclick="deleteMulConfirm()">确定</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 模态框-0选中提示 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="zeroSelect">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
              <h4>请至少选择1名用户进行批量删除！</h4>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-success" data-dismiss="modal">确定</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
{% endblock %}

{% block js %}
    <!-- Bootstrap-table -->
    <script src="{% static 'js/bootstrap-table.min.js' %}"></script>

    <script>
        /* 定义全局url请求 */
        var url = '/user_listSolve/'
        /* 定义表格 */
        $('#user-table').bootstrapTable({
            /*
                说明：
                请求后台的Url或者外部json文件，内容为json数组，且键(key)的名字必须与下方columns的field值一样。
                当json文件内容为json对象时，格式如下：
                {
                    "total": 2,//表示
                    "rows": [
                        {
                            id: 0,
                            name: 'xyh'
                        }
                    ]
                }
                分页要写server，但是server如果没有处理的话，会在第一页显示所有的数据，分页插件不会起作用。
             */
            url: url,        //通过url从后台获取数据
            method: 'GET',                  //请求方式
            dataType: 'json',               //数据类型
            uniqueId: 'id',                 //每一行的唯一标识，一般为主键列
            striped: true,                  //是否显示行间隔色
            cache: false,                   //是否使用缓存
            sortable: true,                 //是否启用排序
            sortOrder: 'desc',              //排序方式
            sidePagination: 'server',       //分页方式：client客户端分页，server服务端分页
            undefinedText: '数据错误',       //undefined格式数据的默认显示
            singleSelect: false,            //开启单选，获取选中的行数必须要有该参数
            toolbar: '#toolbar',            //工具按钮选择哪个容器
            search: false,                  //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            showColumns: true,              //是否显示所有的列（选择显示的列）
            minimumCountColumns: 2,         //最少允许的列数
            showRefresh: true,              //是否显示刷新按钮
            showToggle: true,               //是否显示详细视图和列表视图的切换按钮
            cardView: false,                //是否显示详细视图
            detailView: false,              //是否显示父子表
            clickToSelect: true,            //是否启用点击选中行
            pagination: true,               //是否显示分页
            pageNumber: 1,                  //初始化加载第一页，默认第一页
            pageSize: 10,                   //每页的记录行数
            pageList: [10, 20, 50, 100],    //可供选择的每页的行数
            paginationPreText: "上一页",     
            paginationNextText: "下一页",   
            queryParamsType: "",            //自定义的参数，会在url后面进行拼接       
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也要该城遗址的
                var temp = {
                    'pageSize': params.pageSize,    //每页多少条数据
                    'pageNumber': params.pageNumber,//页码
                    'searchText': $('#searchText').val(),//查询内容
                }
                return temp;
            },
            columns: [
                {
                    checkbox: true          //第一页显示复选框
                },   
                {
                    field: 'username',
                    title: '用户名',
                    align: 'center',
                    
                },
                {
                    field: 'name',
                    title: '姓名',
                    align: 'center',
                },
                {
                    field: 'address',
                    title: '管理区域',
                    align: 'center',
                },
                {
                    field: 'phone',
                    title: '联系电话',
                    align: 'center',
                },
                {
                    field: 'qq',
                    title: 'QQ',
                    align: 'center',
                },
                {
                    field: 'is_active',
                    title: '状态',
                    align: 'center',
                    formatter: stateFormatter,
                },
                {
                    field: '',
                    title: '操作',
                    align: 'center',
                    events: {
                        'click #delete': function(e, value, row, index) {
                            /* 获取选中行的数据，进入删除信息提示界面 */
                            deleteInfo(row)
                        },
                        'click #edit': function(e, value, row, index){
                            /* 获取选中行的数据，进入用户编辑页面 */
                            editInfo(row)
                        }
                    },
                    formatter: operateFormatter,
                },   
            ],
        })
        /* 使用格式化函数，指定操作栏 */
        function operateFormatter(value, row, index){
            var result = ""
            result += '<button type="button" id="edit" class="btn btn-warning btn-xs">编辑</button>'
            result += '<button type="button" id="delete" class="btn btn-danger btn-xs">删除</button>'
            return result
        }
        /* 指定状态 */
        function stateFormatter(value, row, index){
            var result = ""
            if(row.is_active){
                result = '<span class="btn btn-success btn-xs">激活</span>'
            }else{
                result = '<span class="btn btn-danger btn-xs">冻结</span>'
            }
            return result
        }
        /* 显示单选删除信息 */
        function deleteInfo(user) {
            /* 传入用户对象，并且获取用户id */
            let deleteId = user.id
            let deleteUsername = user.username
             /* 手动打开模态框，询问是否删除 */
             $('#deleteId').val(deleteId)
             document.getElementById('deleteUsername').innerHTML = '用户名：' + deleteUsername
             $('#deleteInfo').modal('show')
        }
        /* 执行单选删除操作 */
        function deleteConfirm(){
            //获取需要删除用户的ID
            let deleteId = $('#deleteId').val()
            //统一转化为数组形式，给后端处理
            let arr = []
            arr.push(deleteId)
            //向后端发送删除请求
            $.ajax({
                url: '{% url "user_del" %}',
                type: 'POST',
                data: {
                    'userId': arr
                },
                success: function(arg){
                   var dict = JSON.parse(arg)
                   /* 删除成功，则更新表格 */
                   if(dict.status){
                       $('#user-table').bootstrapTable('refresh',{url: url})
                   }
                   /* 关闭框选 */
                   $('#deleteInfo').modal('hide')
                }
            })
        }
        /* 显示多选删除信息 */
        function deleteMulInfo(){
            /* 获取选中的数据对象的长度 */
            let deleteLength = $('#user-table').bootstrapTable('getSelections').length
            /* 判定没有选择任何数据的情况 */
            if(deleteLength == 0){
                $('#zeroSelect').modal('show')
                return
            }
            $('#deleteIdLength').html("您确定要删除选中的"+deleteLength+"名用户吗？")
            /* 打开批量删除提示框 */
            $('#deleteMulInfo').modal('show')

        }
        /* 执行多选删除操作 */
        function deleteMulConfirm(){
            /* 获取选中的数据 */
            let deleteMulId = $('#user-table').bootstrapTable('getSelections').map((d,i)=>{
                return d.id
            })
            $.ajax({
                url: '{% url "user_del" %}',
                type: 'POST',
                data: {
                    'userId': deleteMulId
                },
                success: function(arg){
                    /* 判断状态 */
                    var dict = JSON.parse(arg)
                    /* 如果删除成功，更新表格 */
                    if(dict.status){
                        /* $('#user-table').bootstrapTable('remove',{
                            //field决定根据哪个字段删除
                            field: 'id',
                            //value决定字段的值
                            values: deleteMulId
                        }) */
                        //仅删除具有局限性，应该直接刷新数据
                        $('#user-table').bootstrapTable('refresh',{url: url})
                    }
                    /* 关闭框选 */
                    $('#deleteMulInfo').modal('hide')
                    
                }
            })
        }
        /* 执行编辑操作 */
        function editInfo(row){
            /* 实现页面跳转 */
            window.location = "/user_edit-"+row.id+"/"
        }
        /* 查询按钮触发函数 */
        function searchButton(){
            $('#user-table').bootstrapTable('refresh',{url: url})
        }
        /* 重置触发函数 */
        function resetButton(){
            $('#searchText').val('')
            $('#user-table').bootstrapTable('refresh',{url: url})
        }
       
    </script>

{% endblock %}
